<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你最喜欢哪种美食？</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .food-item img {
            width: 200px;
            height: 150px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>你最喜欢哪种美食？</h1>
        
        <div id="checkboxContainer">
            <span v-for="(food, index) in foods" :key="food.id">
                <input type="checkbox" 
                       :id="food.id" 
                       v-model="food.checked">
                <label :for="food.id">{{ food.name }}</label>
            </span>
        </div>
        
        <div>
            <label for="other">其他：</label>
            <input type="text" id="other" v-model="otherFood">
        </div>
        
        <div>
            <input type="file" id="file" @change="handle" accept="image/*">
            <button @click="upload">上传</button>
        </div>
        
        <div>
            <button @click="All">全选</button>
            <button @click="deAll">全不选</button>
            <button @click="fan">反选</button>
        </div>
        
        <h2>推荐美食</h2>
    
        <div id="foodImagesContainer">
            <div class="food-item" 
                 v-for="(food, index) in foods" 
                 :key="food.id"
                 :style="{display: food.checked ? 'inline-block' : 'none'}"
                 :data-food="food.id">
                <img :src="food.image" :alt="food.name">
                <p>{{ food.name }}</p>
            </div>
        </div>
    </div>
    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    foods: [
                        { id: 'food1', name: '火锅', checked: false, image: '../综合练习2/火锅.jpg' },
                        { id: 'food2', name: '烧烤', checked: false, image: '../综合练习2/烧烤.jpg' },
                        { id: 'food3', name: '川菜', checked: false, image: '../综合练习2/川菜.jpg' },
                        { id: 'food4', name: '寿司', checked: false, image: '../综合练习2/寿司.jpg' },
                        { id: 'food5', name: '披萨', checked: false, image: '../综合练习2/披萨.jpg' },
                        { id: 'food6', name: '汉堡', checked: false, image: '../综合练习2/汉堡.jpg' }
                    ],
                    otherFood: '',
                    selectedFile: null
                }
            },
            methods: {
                All() {
                    this.foods.forEach(food => {
                        food.checked = true;
                    });
                },
                deAll() {
                    this.foods.forEach(food => {
                        food.checked = false;
                    });
                },
                fan() {
                    this.foods.forEach(food => {
                        food.checked = !food.checked;
                    });
                },
                handle(e) {
                    this.selectedFile = e.target.files[0];
                },
                upload() {
                    if (!this.selectedFile) {
                        alert('请选择图片文件');
                        return;
                    }
                    
                    if (!this.otherFood.trim()) {
                        alert('请输入美食名称');
                        return;
                    }
                    
                    const foodName = this.otherFood.trim();
                    const customId = 'custom_' + Date.now();
                    
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.foods.push({
                            id: customId,
                            name: foodName,
                            checked: true, 
                            image: e.target.result
                        });
                        
                        alert('上传成功！');
                        
                        this.selectedFile = null;
                        this.otherFood = '';
                        document.getElementById('file').value = '';
                    };
                    reader.readAsDataURL(this.selectedFile);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
    